<template>
  <div>
    <div @click="open">点击我上传</div>
    <img :src="img" alt="" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: "",
    };
  },
  methods: {
    open() {
      let options = {
        type: "image",
        multiple: true,
        callback(res) {
          let file = res.path[0].files[0];
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (e) => {
            console.log(this);
            this.img = e.target.result;
          };
        },
      };
      this.createUpload(options);
    },
    createUpload({ type, multiple, callback }) {
      let uploadFile = document.createElement("INPUT");
      let allType = null;
      type === "image"
        ? "image/gif, image/jpeg, image/png, image/wbmp"
        : type === "audio"
        ? "audio/mp3, audio/amr, audio/midi, audio/ime, audio/mpeg"
        : type === "video"
        ? "video/mp4, video/3gp, video/mpg4"
        : "";
      uploadFile.type = "file";
      uploadFile.accept = allType;
      uploadFile.multiple = multiple;
      uploadFile.click();
      uploadFile.addEventListener(
        "input",
        (res) => {
          //   自定义执行
          callback.call(this, res);
        },
        false
      );
    },
  },
};
</script>